<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link type="text/css" rel="stylesheet" href="css/style.css" />
  <script src="./js/axios.js"></script>
  <script src="./js/vue.js"></script>
  <script src="./js/md5.js"></script>
  <style>
    #box{
      width:1000px;
      margin:auto;
      border:1px solid black;
    }
    #box h1{
      width:100%;
      height:60px;
      line-height:60px;
      text-align:center;
    }
    p{
      text-align:center;
    }

  </style>
</head>
<body>

  <div id="box">
    <h1>修改用户</h1>
    <p>
      用户名: <input type="text" v-model="userName">
    </p>
    <p>
      登录名: <input type="text" v-model="loginName">
    </p>
    <p>
      密码: <input type="text" v-model="password">
    </p>
    <p>
      性别:
      <select name="sex" id="sex" v-model="sex">
        <option value="1">男</option>
        <option value="2">女</option>
      </select>
    </p>
    <p>
      邮箱: <input type="email" v-model="email">
    </p>
    <p>
      手机号: <input type="text" v-model="mobile">
    </p>
    <p>
      <button @click="xgBtn">修改</button>
    </p>
    
  </div>
  <script>
    new Vue({
      el:"#box",
      data:{
        id:0,
        userName:"",
        loginName:"",
        password:"",
        email:"",
        sex:"",
        mobile:"",
        UserList:{},
        userNameFlag:""
      },
      methods:{
        md5Public:async function(objectStr){
          let randomNum = 0;
          //接口拿随机数
          await axios({
              url:"http://localhost:8080/setRedisNum",
              methods:"get"
          }).then(res => {
              randomNum = res.data;
              
          })
          //放到header里的参数 时间戳 随机数 加密的字符串
          //时间戳
          var dateStr = new Date();
          dateStr = Date.now();
              
          //把obj按照key值升序
          let sortObject = function(obj){
              let sorter = function(a,b){
                  return obj[a] - obj[b];
              }
              let keys = Object.keys(obj);
              keys.sort(sorter);
              let res = {};
              keys.forEach(key => {
                  res[key] = obj[key];
              });
              return res;
          }
          //升序的对象
          var sxStr = sortObject(objectStr);
          //把升序的对象转成字符串
          var jsonStr = "";
          for(let obj in objectStr){
              jsonStr += obj+"="+objectStr[obj]+"&";
          }
          //把最后一个&符号切割了
          jsonStr = jsonStr.substr(0, jsonStr.length - 1); 

          //加密字符串
          var str = MD5(jsonStr+randomNum);
          await axios({
              url:"http://localhost:8080/returnInterfaceStr",
              methods:"POST",
              params:objectStr,
              headers:{
                  "TimeStamp":dateStr,
                  "randomNum":randomNum,
                  "encryptionStr":str
              }
          }).then(res => {
              if( res.data == true ){
                  return true;
              }else{
                  return false;
              }
          })
          return true;
      },
        getParameter:function(par){
          //获取当前URL
          var local_url = document.location.href;
          //截取get字符串
          var getstr = local_url.substr(local_url.indexOf('?') + 1)
          //解析成get数组
          var post = getstr.split('&')
          //查找要找到参数（par）
          for ( var i in post) {
              if (post[i].indexOf(par + '=') >= 0) {
                  return post[i].replace(par + '=', '');
              }
          }
          //如果找不到返回false
          return false;
        },
        md5Public:async function(objectStr){
          let randomNum = 0;
          //接口拿随机数
          await axios({
              url:"http://localhost:8080/setRedisNum",
              methods:"get"
          }).then(res => {
              randomNum = res.data;
              
          })
          //放到header里的参数 时间戳 随机数 加密的字符串
          //时间戳
          var dateStr = new Date();
          dateStr = Date.now();
              
          //把obj按照key值升序
          let sortObject = function(obj){
              let sorter = function(a,b){
                  return obj[a] - obj[b];
              }
              let keys = Object.keys(obj);
              keys.sort(sorter);
              let res = {};
              keys.forEach(key => {
                  res[key] = obj[key];
              });
              return res;
          }
          //升序的对象
          var sxStr = sortObject(objectStr);
          //把升序的对象转成字符串
          var jsonStr = "";
          for(let obj in objectStr){
              jsonStr += obj+"="+objectStr[obj]+"&";
          }
          //把最后一个&符号切割了
          jsonStr = jsonStr.substr(0, jsonStr.length - 1); 

          //加密字符串
          var str = MD5(jsonStr+randomNum);
          await axios({
              url:"http://localhost:8080/returnInterfaceStr",
              methods:"POST",
              params:objectStr,
              headers:{
                  "TimeStamp":dateStr,
                  "randomNum":randomNum,
                  "encryptionStr":str
              }
          }).then(res => {
              if( res.data == true ){
                  return true;
              }else{
                  return false;
              }
          })
          return true;
      },
        init:async function(){
          let flag = await this.md5Public({"a1":54,"a2":55,"a3":56});
          if( flag == true ){
            axios.get("http://localhost:8080/getUserListByID?id="+this.id).then(res => {
              if( res.data[0].type == 1 ){
                alert("管理员不可修改");
                window.location.href = "./showUserList.html";
              }
              this.userName = res.data[0].userName;
              this.loginName = res.data[0].loginName;
              this.password = res.data[0].password;
              this.email = res.data[0].email;
              this.sex = res.data[0].sex;
              this.mobile = res.data[0].mobile;
              this.userNameFlag = res.data[0].userName;
            })
          }
        },
        xgBtn:async function(){
          await axios({
            url:"http://localhost:8080/getUserList",
            methods:"GET"
          }).then(res => {
            this.UserList = res.data;
          })

          if( this.userName == ""  ){
            alert("用户名不能为空!");
            return;
          }

          if( this.userName != this.userNameFlag ){
            for(let i=0;i<this.UserList.length;i++){
              if( this.UserList[i].userName == this.userName ){
                alert("账号已存在,请重新输入!");
                return;
              }
            }
          }

          if( this.loginName == ""  ){
            alert("登录名不能为空!");
            return;
          }

          if( this.password == ""  ){
            alert("密码不能为空!");
            return;
          }

          if( this.email == ""  ){
            alert("邮箱不能为空!");
            return;
          }

          if( this.mobile == ""  ){
            alert("手机号不能为空!");
            return;
          }

          //发送请求
          let formData=new FormData();
          formData.append("id",this.id);
          formData.append("userName",this.userName);
          formData.append("loginName",this.loginName);
          formData.append("email",this.email);
          formData.append("mobile",this.mobile);
          formData.append("sex",this.sex);
          formData.append("password",this.password);
          axios({
            method:"post",
            url:"http://localhost:8080/updateUserListByID",
            data:formData
          }).then(res => {
            console.log(res.data);
            if( res.data == true ){
              window.location.href = "./showUserList.html";
            }else{
              alert("修改失败!");
            }
          })
        }
      },
      created:function(){
        this.id = this.getParameter("id");
        this.init();
      }
    })



  </script>
  
</body>
</html>